<template>
  <div class="container">
    <div class="header">
      <van-nav-bar
        title="我的推荐"
        left-text="返回"
        right-text
        left-arrow
        @click-left="onClickLeft"
        fixed
      />
    </div>
    <div class="recommendInfo">
      <div class="title">我的推荐人</div>
      <div class="mainInfo">
        <div class="card">
          <div class="infoFill" v-if="!showRecommend">
            <label>推荐人ID：</label>
            <input type="text" placeholder="填写用户ID">
            <span @click="saveAddress">确定</span>
          </div>
          <div class="infoView" v-else>
            <div class="left">
              <img :src="userData.avatar">
            </div>
            <div class="right">
              <div class="name">{{userData.nickname}}</div>
              <div class="user_id">ID:{{userData.userId}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="share">
      <div class="title">
        <div class="left">推荐给其他人</div>
        <div class="right" @click="toShareRecord">分享记录</div>
      </div>
      <div class="qrcode" id="qrcode" ref="qrcode"></div>
      <div class="myId">(我的ID：{{list.userId}})</div>
      <div class="linkShare">
        <span @click="share_redpacket_to_user()">链接分享</span>
      </div>
      <div class="codeShare">
        <span>二维码分享</span>
      </div>
      <div class="ps">成功分享 一劳永逸 终生受益</div>
    </div>
    <!-- 5.提示在哪里点击分享 -->
    <div v-show="Free_show" class="Free_show_two" @click="FreeHidder()">
      <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/wxfx0.png">
    </div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
import sha1 from 'js-sha1'
export default {
  name: "myRecommended",
  data() {
    return {
      list: "",
      showRecommend: false,
      userData: "",
      Free_show: false
    };
  },
  mounted() {
    this.qrcode();
    this.getUserInfo();
     this.wxRegCallback();
  },
  created:function () {
    setTitle('我的推荐')
  },
  methods: {
    //返回
    onClickLeft() {
      this.$router.back();
    },
    // 获取二维码
    qrcode() {
      var list = JSON.parse(localStorage.getItem("userInfo"));
      this.list = list;
      if (!list) {
        return false;
      }
      let qrcode = new QRCode("qrcode", {
        width: 150,
        height: 150, // 高度
        text: "http://www.mysoule.com/bindOrRegister?userId=" + list.userId // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      console.log(qrcode);
    },
    // 获取上级用户ID
    getUserInfo() {
      var list = JSON.parse(localStorage.getItem("userInfo"));
      if (!list) {
        return false;
      }
      this.list = list;
      let params = {
        user_id: list.userId
      };
      this.$axios
        .post(`/api/common/v1/system/queryUserRelation`, params)
        .then(res => {
          this.userData = res.data;
          if (this.userData) {
            this.showRecommend = true;
          } else {
            this.showRecommend = false;
          }
        })
        .catch(res => {
          this.$toast("获取用户信息出错");
        });
    },
    //  将建议传给后台
    async saveAddress() {
      let this_ = this;
      var userList = JSON.parse(localStorage.getItem("userInfo"));
      this.userList = userList;
      let params = {
        curr_userId: userList.userId,
        relation_userId: this.recommend
      };
      const res = await this.$axios.post(
        "/api/common/v1/system/addUserRelation",
        params
      );

    },
    //微信
    FreeHidder() {
      this.Free_show = false;
    },
     //分享红包给好友
      share_redpacket_to_user(){
          this.Free_show=true
      },
      wxRegCallback () {
          var that=this;
          var json_data=that.$axios.get(that.$api.weixinUrl);
          var fx_noncestr=that.$base.randomString(32);
          var fx_tampstr=that.$base.createTimestamp();

          json_data.then(function(result){
              var signStr = "jsapi_ticket=" + result.data + "&noncestr=" + fx_noncestr + "&timestamp=" + fx_tampstr + "&url=" + window.location.href;

              signStr=sha1(signStr);
              that.$wxjs.config({
                  debug: false,
                  appId: "wx994320d0aac3cee8",
                  timestamp: fx_tampstr,
                  nonceStr: fx_noncestr,
                  signature: signStr,
                  jsApiList: ['chooseImage', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay']
              });

              var list=JSON.parse(localStorage.getItem('userInfo'))
              that.list=list;
              var userID=list.userId;
              // 用于微信JS-SDK回调
              that.$wxjs.ready(function () {
                  that.$wxjs.onMenuShareTimeline({
                      title: '生态村注册，下载App，好货赚不停', // 分享标题
                      desc:'终于等到你，欢迎来到生态村',
                      link: 'http://gladmin.stc1518.com/register?userId='+userID, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                      imgUrl: "http://gladmin.stc1518.com//static/img/logo.6ad6607.png", // 分享图标
                      success: function () {
                          // 设置成功
                      }
                  });
                  that.$wxjs.onMenuShareAppMessage({
                      title: '生态村注册，下载App，好货赚不停', // 分享标题
                      desc:'终于等到你，欢迎来到生态村',
                      link: 'http://gladmin.stc1518.com/register?userId='+userID, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                      imgUrl: "http://gladmin.stc1518.com//static/img/logo.6ad6607.png", // 分享图标
                      success: function () {
                          // 设置成功
                          that.$toast("分享成功");
                      },error: () => {
                          that.$toast("已取消分享");
                      }
                  });
              });
          })
      },
      toShareRecord(){
        this.$router.push('/ShareRecords');
      }
  }
};
</script>
<style scoped>
.container {
  /*padding-top: 0.46rem;*/
}
.recommendInfo {
	margin-top: 53px;
  padding: 0.15rem;
}
.recommendInfo .title {
  font-size: 0.12rem;
  color: #333333;
}
.mainInfo {
  padding: 0 0.1rem;
}
.mainInfo .card {
  background: #fff;
  width: 100%;
  height: 0.8rem;
  border-radius: 0.08rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.2rem;
}
.infoFill {
  font-size: 0.14rem;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.infoFill input {
  background: #eeeeee;
  width: 40%;
  height: 0.3rem;
  border-radius: 0.03rem;
  border: none;
  padding-left: 0.1rem;
}
.infoFill span {
  margin-left: 0.1rem;
  height: 0.3rem;
  width: 0.5rem;
  background: #04c14b;
  color: #fff;
  border-radius: 0.05rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}
.share {
  background: #fff;
  padding: 0.2rem 0.15rem;
}
.share .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  font-size: 0.12rem;
}
.share .title .right {
  padding: 0.02rem 0.06rem;
  color: #04c14b;
  border: 1px solid #04c14b;
  border-radius: 0.03rem;
}
.qrcode {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.1rem;
}
.myId {
  margin-top: 0.2rem;
  text-align: center;
  width: 100%;
  color: #333333;
}
.linkShare {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.2rem;
}
.linkShare span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 0.3rem;
  /* border:1px solid #04c14b; */
  color: #fff;
  background: #04c14b;
  border-radius: 0.5rem;
}
.codeShare {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.1rem;
}
.codeShare span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 0.3rem;
  border: 1px solid #04c14b;
  color: #04c14b;
  border-radius: 0.5rem;
}
.ps {
  color: #333333;
  width: 100%;
  text-align: center;
  margin-top: 0.2rem;
}
.infoView {
  display: flex;
  justify-content: center;
  align-items: center;
}
.infoView .left img {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.infoView .right {
  padding-left: 0.1rem;
}
.infoView .right > div {
  padding: 0.02rem 0;
  font-size: 0.12rem;
}
.Free_show_two {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.Free_show_two img {
  width: 100%;
}
</style>


